<template>
    <div class="ordering">
        <!-- 头部 -->
        <div class="heading">菜品管理</div>
        <!-- 内容 -->
        <div class="content-view">
            <ProTable ref="proTable" :api="getDishDataApi" :formList="formList" :initParams="initParams"
                      :tabHeaders="tablist">
                <!-- 操作区域 -->
                <template #actionButton>
                    <router-link to="/edit-dish">
                        <el-button icon="el-icon-plus" size="medium" type="primary">新增</el-button>
                    </router-link>
                </template>
                <!-- 图片-->
                <template #image="{ rows }"><img :src="'http://localhost:8501'+ rows.image"
                                                 style="width: 60px;height: 60px"></template>
                <!-- 上下架状态 -->
                <template #status="{ rows }">{{ rows.status ? '已上架' : '已下架' }}</template>
                <!-- 操作内容 -->
                <template #opera="{ rows }">
                    <!-- 上架 - 下架  下架 - 上架 -->
                    <el-button :type="rows.status ? 'danger' : 'success'" size="mini"
                               @click="changeState(rows.id, rows.status)">{{ rows.status ? '下架' : '上架' }}
                    </el-button>
                    <el-button size="mini" @click="$router.push(`/edit-dish?id=${rows.id}`)">编辑</el-button>
                </template>
            </ProTable>
        </div>
    </div>
</template>

<script>
import ProTable from '@/components/ProTable'
import {changeDishDataApi, getDishCateApi, getDishDataApi} from '@/api/dish'

const stateEnum = [{label: '全部', value: undefined}, {label: '上架', value: 1}, {label: '下架', value: 0}]

export default {
    name: 'Dish',
    components: {ProTable},
    data() {
        return {
            getDishDataApi,
            tablist: [
                {title: '菜品名称', prop: 'name'},
                {title: '菜品图片', prop: 'image', type: 'img'},
                {title: '类目', prop: 'categoryName'},
                {title: '价格(元)', prop: 'price'},
                {title: '菜品状态', prop: 'status'},
                {title: '创建时间', prop: 'createTime'},
                {title: '操作', prop: 'opera'},
            ],
            // 表单
            formList: [
                {type: 'text', prop: 'name', label: '菜品名'},
                {type: 'select', prop: 'categoryId', label: '菜品类目', enum: []},
                {type: 'select', prop: 'status', label: '菜品状态', enum: stateEnum}
            ],
            // 默认查询参数
            initParams: {pageNum: 1, pageSize: 5, name: '', categoryId: '', status: ''}
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            // 1. 发起请求
            const {data} = await getDishCateApi({pageNum: 1, pageSize: 100})
            // 2. 渲染数据
            const cateList = data.list.map(item => ({label: item.label, value: item.id}))
            this.formList[1].enum = [{label: '全部', value: undefined}, ...cateList]
        },
        async changeState(id, state) {
            // 1. 发起请求
            await changeDishDataApi(id, state ? 0 : 1)
            // 2. 刷新数据
            this.$message.success('操作成功')
            this.$refs.proTable.search()
        }
    }
}
</script>

<style lang="scss" scoped></style>